<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { NCard, NSpace, NIcon, NModal, useMessage, NFlex, useDialog } from 'naive-ui'
import router from '../config/Router'

import ProjectNew from './ProjectNew.vue'

import { AddSharp, RemoveCircleSharp } from '@vicons/ionicons5'

import { http } from '../utils/Request'

import type { Result } from '../utils/Request'

interface Project {
    description: string
    serverAddress: string
}

const message = useMessage()
const dialog = useDialog()

const projectList = reactive<Array<Project>>([])

const itemClick = (v) => {
    router.push({ name: 'controller', query: { serverAddress: v.serverAddress } })
}

const connectServer = (server: Project) => {
    http.post(
        server.serverAddress,
        null,
        (result: Result) => {
            const doc = result.data as Map<string, unknown>
            if (doc['path']) {
                message.info('项目连接成功')
                projectList.push({
                    description: server.description,
                    serverAddress: server.serverAddress
                })
                localStorage.setItem('list', JSON.stringify(projectList))
                router.push({ name: 'controller', query: { serverAddress: server.serverAddress } })
            } else {
                message.warning('服务器连接成功，但不是有效项目')
            }
        },
        (error: Error) => {
            message.error(error.message)
        }
    )
}

const showNewProject = ref<boolean>(false)

const loadHistoryProject = () => {
    const history = localStorage.getItem('list')
    if (history) {
        try {
            projectList.push(...JSON.parse(history))
        } finally {
            /* empty */
        }
    }
}

const removeProject = (item) => {
    dialog.info({
        title: '询问',
        onPositiveClick: () => {
            projectList.splice(projectList.indexOf(item), 1)
            localStorage.setItem('list', JSON.stringify(projectList))
        },
        content: '你确定要删除此项目?',
        negativeText: '取消',
        positiveText: '确定'
    })
}

onMounted(() => {
    loadHistoryProject()
})
</script>

<template>
    <div class="root">
        <n-space justify="center">
            <n-card
                v-for="item in projectList"
                :key="item.serverAddress"
                title=""
                class="it"
                @click="itemClick(item)"
            >
                <div class="tl">{{ item.description }}</div>
                <template #action>
                    <n-flex justify="space-between" class="line"
                        >{{ item.serverAddress }}
                        <n-icon :component="RemoveCircleSharp" @click.stop="removeProject(item)"
                    /></n-flex>
                </template>
            </n-card>
            <n-card title="" class="it click center" @click="showNewProject = !showNewProject">
                <template #footer>
                    <n-icon :component="AddSharp"></n-icon>
                </template>
                <template #action> 添加新项目 </template>
            </n-card>
        </n-space>

        <n-modal v-model:show="showNewProject">
            <n-card
                title="添加服务"
                :bordered="false"
                style="width: 35rem"
                size="small"
                role="dialog"
                aria-modal="true"
            >
                <project-new @connected="connectServer"></project-new>
            </n-card>
        </n-modal>
    </div>
</template>

<style scoped>
.root {
    width: 100vw;
    height: 100vh;
    padding: 2rem 2rem 2rem 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-items: center;
    overflow-y: auto;
}

.line {
    align-items: center;
}

.tl {
    text-align: left;
    width: 100%;
}

.it {
    width: 20rem;
    cursor: pointer;
}
</style>
